<template>
	<view class="container">
		<!--header-->
		<view class="tui-header">
			<tui-list-cell :arrow="true" class="tui-list">
				<tui-icon name="service-fill" :size="24" color="#e41f19"></tui-icon>
				<view class="tui-list-cell-name" @click="jump('selectCity')">
					<!-- <picker @change="PickerChange" :value="index" :range="picker"> -->
						<view class="picker">
							{{userInfo.parentAreaName}}-{{userInfo.areaName}}-{{userInfo.communityName}}
						</view>
					<!-- </picker> -->
				</view>
			</tui-list-cell>

		</view>
		<!--header-->
		<view class="tui-header-banner">
			<view class="tui-banner-bg">
				<view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view>
				<!--banner-->
				<view class="tui-banner-box">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper"
					 :circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
						<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="detail">
							<image :src="item.src" class="tui-slide-image" mode="scaleToFill" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<view class="tui-product-category">
			<view class="tui-category-item" v-for="(item,index) in category" :key="index" :data-key="item.link" @tap="more">
				<image :src="'../../static/images/classify/'+item.img" class="tui-category-img" mode="scaleToFill"></image>
				<view class="tui-category-name">{{item.name}}</view>
			</view>
		</view>
		
		<!--headlines-->
		<view class="tui-rolling-news list-item">
			<span @tap="jump('noticeList')"><tui-icon name="news" :size='26' color='#555'></tui-icon>公告：</span>
			<swiper :vertical="true" :autoplay="true" :circular="true" :interval="4000" class="tui-swiper">
				<swiper-item v-for="(item,index) in headlines" :key="index"  @tap="detailNews(item, 'notice')" class="tui-swiper-item">
					<view class="tui-news-item">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>
		<!--headlines :scroll-left="scrollLeft"-->
      <!-- <scroll-view scroll-x class="bg-white nav" scroll-with-animation>
       	<view class="cu-item" :class="item.typeCd==curTypeCd?'text-green cur':''" v-for="(item,index) in activitiTitle"
       	 :key="index" @tap="selectActiviti(item)" :data-id="index">
       		{{item.name}}
       	</view>
       </scroll-view> -->
		<view class="tui-product-box">
		  
			<view class="list-view">
				<view v-for="(item,index) in newsList" :key="index" class="list-cell list-item" :class="[(newsList.length-1)==index?'last':'']"
				 hover-class="hover" :hover-stay-time="150" @tap="detailNews(item)">
					<view class="cell-title-box" :class="[item.src==0?'':'min']">
						<view class="cell-title" :class="[item.src==0?'pdr0':'']">{{item.title}}</view>
						<image :src="item.src" class="img" v-if="item.src"></image>
					</view>
					<view class="sub-title" style="padding: 0;">
						<!-- <text class="tag" :class="[getLabelCss(item.label)]" v-if="item.label!=0">{{getLabelText(item.label)}}</text> -->
						<text class="lg text-gray cuIcon-time" style="margin-right: 10upx;"></text>
						<text class="sub-content">{{item.startTime}}</text>
					</view>
				</view>
				<view class="noData" v-if="!newsList.length">
					暂时没有数据
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import tuiIcon from "@/components/icon/icon"
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiTag from "@/components/tag/tag"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiLoadmore,
			tuiNomore,
			tuiListView,
			tuiListCell
		},
		data() {
			return {
				current: 0,
				hotSearch: [
					"休闲零食",
					"自热火锅",
					"小冰箱迷你"
				],
				curTypeCd: '10001',
				activitiTitle: [{
						typeCd: '10003',
						name: '公共安全及消防'
					},
					{
						typeCd: '10004',
						name: '政务及党政'
					},
					{
						typeCd: '10005',
						name: '费用公开'
					},
					{
						typeCd: '10001',
						name: '小区文化'
					},
					{
						typeCd: '10002',
						name: '其他'
					}
				],
				banner: [
					"1.jpg",
					"2.jpg",
					"3.jpg",
					"4.jpg",
					"5.jpg"
				],
				category: [{
					img: "5.png",
					name: "我的房屋",
					link:'/pages/life/home/house'
				},{
					img: "14.png",
					name: "住户管理",
					link:'/pages/life/home/lodgeManage'
				},{
					img: "1.png",
					name: "物业缴费",
					link:'/pages/picker/picker'
				}, {
					img: "2.png",
					name: "报事报修",
					link:'/pages/drawer/drawer'
				}, {
					img: "12.png",
					name: "临停缴费",
					link:'/pages/picker-view/picker-view'
				},{
					img: "10.png",
					name: "聚实惠",
					link:'/pages/extend-view/mall/mall'
				}, {
					img: "8.png",
					name: "房管家",
					link:'/pages/extend-view/tabs/tabs'
				}, {
					img: "more.png",
					name: "更多",
					link:'/pages/extend/extend'
				}],
				newsList: [{
					title: '温故知"心"习近平这些话要牢记',
					img: 1,
					source: "央视新闻网",
					label: 1
				}, {
					title: '3.07财经早报┃头条：推进改革开放创新增进民生福祉，促进经济社会持续健康发展促进经济社会持续健康发展',
					img: 0,
					source: "百科故事大全",
					label: 0
				}, {
					title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列',
					img: 0,
					source: "粤港精英联盟",
					label: 2
				}, {
					title: '触手直播“和平精英”星联赛Jstar夺冠 大热',
					img: 1,
					source: "央视新闻网",
					label: 0
				}, {
					title: '开户大战燎原！加急上线科创板预约开户',
					img: 2,
					source: "百科故事大全",
					label: 4
				}, {
					title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列',
					img: 1,
					source: "粤港精英联盟",
					label: 4
				}],
				headlines: [
					"苹果XR对比华为Mate20你会选择谁",
					"格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气",
					"耐克没进前十，今年Q1全球受欢迎品牌榜"
				],
				pageIndex: 1,
				page: 1,
				row: 7,
				loadding: false,
				pullUpOn: true
			}
		},
		computed:{
			userInfo(){
				let us = {}
				try{
					us = uni.getStorageSync(this.java110Constant.mapping.USER_INFO);
					us = this.java110Util.des.desDecrypt(us)
					us = JSON.parse(us)
				}catch(e){
					//TODO handle the exception
				}
				return us
			}
		},
		mounted() {
		   let _that = this;
		   let _objData = {
			  page:1,
			  row:5,
			  communityId:this.userInfo.communityId
		   };
		   this.java110Context.request({
			    url:  _that.java110Constant.url.listAdvertPhoto,
				header: _that.java110Context.getHeaders(),
				method: "GET",
				data: _objData, //动态数据
				success: function (res) {
					if(res.statusCode == 200){
						  let _activites = res.data;
						  _activites = _activites.sort((a,b) => (a.seq - b.seq));
						  let _acts = _activites.map(function(_item){
							   _item.src = _that.java110Constant.url.hcBaseUrl + _item.url + "&time=" + new Date();
							// _item.src = _that.java110Constant.url.filePath + "?fileId=" + _item.headerImg +"&communityId="+_that.data.communityId+"&time="+new Date();
							return _item
						  });
						  _that.banner = [..._acts]
						return;
					}
					 _that.tui.toast('服务器异常了')
				},
				fail: function (e) {
                    _that.tui.toast('服务器异常了')
				}
		   })
		   this.getNotice();
		   this.getNoticeIndex()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if(this.newsList.length >= this.page * this.row){
				this.page = this.page +1;
				this.loadActivitesFun();
			}
			
		},
		methods: {
			jump(name){
			   let urlConst = {
				   noticeList:'/pages/index/noticeList',
				   moreLife:'/pages/index/moreLife',
				   selectCity:'/pages/index/selectCity'
			   }	
			   uni.navigateTo({
			   	url:urlConst[name]
			   })
			},
			selectActiviti:function(_item){
				this.curTypeCd = _item.typeCd;
				this.newsList = [];
				this.page = 1;
				this.getNotice();
			},
			getNotice(){
				let _that = this;
				let _objData = {
				  page: this.page,
				  row: this.row,
				  typeCd: this.curTypeCd,
				  communityId:this.userInfo.communityId
				};
				this.java110Context.request({
				url:  _that.java110Constant.url.listActivitiess,
				header: _that.java110Context.getHeaders(),
				method: "GET",
				data: _objData, //动态数据
				success: function (res) {
					if(res.statusCode == 200){
						  let _activites = res.data.activitiess;
						  let _acts = _activites.map(function(_item){
							   // _item.src = _that.java110Constant.url.hcBaseUrl + _item.url + "&time=" + new Date();
							_item.src = _that.java110Constant.url.filePath + "?fileId=" + _item.headerImg +"&communityId="+_that.userInfo.communityId+"&time="+new Date();
							return _item
						  });
						  _that.newsList = [..._acts]
						return;
					}
					 _that.tui.toast('服务器异常了')
				},
				fail: function (e) {
		            _that.tui.toast('服务器异常了')
				}
				})
			},
			getNoticeIndex(){
				let _that = this;
				let _objData = {
				  page:1,
				  row:5,
				  communityId:this.userInfo.communityId,
				  noticeTypeCd:1000
				};
				this.java110Context.request({
				url:  _that.java110Constant.url.GetNoticeListUrl,
				header: _that.java110Context.getHeaders(),
				method: "GET",
				data: _objData, //动态数据
				success: function (res) {
					if(res.statusCode == 200){
						  res.data.notices.forEach(function(item, index) {
						  	item.timeStr = item.startTime.replace(/:\d{1,2}$/, ' ');
						  });
						  _that.headlines = res.data.notices;
						return;
					}
					 _that.tui.toast('服务器异常了')
				},
				fail: function (e) {
			        _that.tui.toast('服务器异常了')
				}
				})
			},
			detailNews: function(_item,type) {
				if(type){
					uni.navigateTo({
						url: "/pages/index/noticeDetail?noticeId=" + _item.noticeId
					});
					return
				}
				uni.navigateTo({
					url: '/pages/extend-view/newsDetail/newsDetail?activitiesId=' + _item.activitiesId + '&title=' + _item.title +
						'&communityId=' + this.userInfo.communityId
				})
			},
			listNews: function() {
				uni.navigateTo({
					url: '/pages/news/news'
				})
			},
			getLabelText: function(label) {
				return ["", "要闻", "朋友都看过", "本地资讯", "互联网精英看过"][label];
			},
			getLabelCss: function(label) {
				return ["", "b-red", "b-blue", "b-orange", "b-green"][label];
			},
			more: function(e) {
				let key = e.currentTarget.dataset.key || "";
				if(key === '/pages/extend/extend'){
					uni.switchTab({
						url: key
					})
				}else{
					uni.navigateTo({
						url: key
					})
				}
			},
			search: function() {
				uni.navigateTo({
					url: '../news-search/news-search'
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
	.bg-white {
		background-color: #ffffff;
	}
	.nav {
	    white-space: nowrap;
	}
	.nav .cu-item {
	    height: 49px;
	    display: inline-block;
	    line-height: 49px;
	    margin: 0 5px;
	    padding: 0 11px;
	}
	.nav .cu-item.cur {
	    border-bottom: 2px solid;
	}
	.text-green, .line-green, .lines-green {
	    color: #e41f19;
	}
	.container {
		padding-bottom: 20upx;
		color: #333;
	}

	.tui-header {
		width: 100%;
		height: 100upx;
		padding: 10upx 20upx 10upx 20upx;
		box-sizing: border-box;
		background: #f1440d;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* position: fixed;
		left: 0;
		top: 0; */
		z-index: 999;
	}
	.tui-header .title{
		font-size: 36upx;
		line-height: 56upx;
	}
	.tui-header .picker{
		font-size: 28upx;
		line-height: 36upx;
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	.tui-list::after {
		left: 94upx !important
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	.tui-rolling-search {
		width: 100%;
		height: 60upx;
		border-radius: 35upx;
		padding: 0 40upx 0 30upx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-category {
		font-size: 24upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		margin-right: 22upx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24upx;
	}

	.tui-icon-category {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26upx;
		height: 60upx;
		flex: 1;
		padding-left: 12upx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-header-banner {
		/* padding-top: 200upx; */
		box-sizing: border-box;
		/* background: #e41f19; */
		background: url(../../static/images/index/swiper-background-2.png) center bottom;
	}

	.tui-hot-search {
		color: #fff;
		font-size: 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20upx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.tui-hot-tag {
		background: rgba(255, 255, 255, 0.15);
		padding: 10upx 24upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 24upx;
		/* margin-left: 20upx; */
	}

	.tui-banner-bg {
		display: flex;
		height: 180upx;
		/* background: #e41f19; */
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224upx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		/* background: #e41f19; */
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}

	.tui-banner-box {
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		bottom: -80upx;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 240upx;
		border-radius: 12upx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-slide-image {
		width: 100%;
		height: 240upx;
		display: block;
	}

	/* #ifdef APP-PLUS || MP */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8upx;
		height: 8upx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16upx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16upx;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8upx;
		height: 8upx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16upx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16upx;
	}

	/* #endif */

	.tui-product-category {
		background: #fff;
		padding: 80upx 20upx 30upx 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 28upx;
		color: #555;
		margin-bottom: 20upx;
	}

	.tui-category-item {
		width: 25%;
		height: 148upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		
		padding-top: 40upx;
	}

	.tui-category-img {
		height: 96upx;
		width: 96upx;
		display: block;
	}

	.tui-category-name {
		line-height: 28upx;
	}

	.tui-product-box {
		margin-top: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.tui-pb-20 {
		padding-bottom: 20upx;
	}

	.tui-bg-white {
		background: #fff;
	}

	.tui-group-name {
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
		padding: 24upx 0;
	}

	.tui-activity-box {
		display: flex;
		border-radius: 12upx;
		overflow: hidden;
	}

	.tui-activity-img {
		width: 50%;
		display: block;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 200upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12upx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24upx;
	}

	.tui-new-title {
		line-height: 32upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-new-price {
		padding-top: 18upx;
	}

	.tui-new-present {
		color: #ff201f;
		font-weight: bold;
	}

	.tui-new-original {
		display: inline-block;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12upx;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-new-img {
		width: 160upx;
		height: 160upx;
		display: block;
		flex-shrink: 0;
	}

	.tui-new-label {
		width: 56upx;
		height: 56upx;
		border-top-left-radius: 12upx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20upx; */
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12upx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20upx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18upx;
	}

	.tui-sale-price {
		font-size: 34upx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24upx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12upx;
	}

	.tui-pro-pay {
		padding-top: 10upx;
		font-size: 24upx;
		color: #656565;
	}
	
	/*headlines*/
	
	.tui-rolling-news {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		background: #fff;
	}
	
	.tui-rolling-news::after {
		left: 0;
	}
	
	.tui-swiper {
		margin-left: 8upx;
		font-size: 28upx;
		height: 80upx;
		flex: 1;
	}
	
	.tui-swiper-item {
		display: flex;
		align-items: center;
	}
	
	.tui-news-item {
		line-height: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #555;
	}
	
	/*headlines*/
	/*classify*/
	
	.tui-classify-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 28upx 0;
		background-color: #fff;
	}
	
	.tui-classify-item {
		width: 20%;
		text-align: center;
	}
	
	.tui-classify-img {
		width: 88upx;
		height: 88upx;
	}
	
	.tui-classify-name {
		font-size: 26upx;
		line-height: 26upx;
		padding-top: 8upx;
		color: #555;
		white-space: nowrap;
	}
	.list-view {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
	}
	
	.list-cell {
		padding: 30upx 32upx;
		box-sizing: border-box;
	}
	
	.cell-title-box {
		position: relative;
	}
	
	.min {
		min-height: 90upx
	}
	
	.cell-title {
		padding-right: 172upx;
		font-size: 32upx;
		line-height: 56upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	
	.pdr0 {
		padding-right: 0 !important;
	}
	
	.img {
		position: absolute;
		right: 0;
		top: 6upx;
		width: 146upx;
		height: 146upx;
		border-radius: 4upx;
	}
	
	.sub-title {
		padding-top: 24upx;
		font-size: 28upx;
		color: #BCBCBC;
		display: flex;
		align-items: center
	}
	
	.tag {
		padding: 5upx 10upx;
		font-size: 24upx;
		border-radius: 4upx;
		margin-right: 20upx;
	}
	
	.b-red {
		background: #FCEBEF;
		color: #8A5966;
	}
	
	.b-blue {
		background: #ECF6FD;
		color: #4DABEB;
	}
	
	.b-orange {
		background: #FEF5EB;
		color: #FAA851
	}
	
	.b-green {
		background: #E8F6E8;
		color: #44CF85
	}
	.header-title{
	  width: 100%;
	  height: 80upx;
	  justify-content: space-between;
	  display: flex;
	  line-height: 80upx;
	  font-size: 31upx;
	  font-weight: 600;
	  border: 1upx solid #ECECEC;
	}
	
	.header-title .new{
	  margin-left: 20upx;
	}
	
	.header-title .gd{
	  margin-right: 20upx;
	  color: #8a8a8a
	}
	/*classify*/
</style>
